<template>
  <page-loading :show="pageLoading">
    <view class="wrap">
      <view class="pad-t-b-10">
        <view class="color-333 font-30">检查项标题</view>
        <view class="textArea"
          ><u-input
            v-model="title"
            class="inp"
            type="textarea"
            placeholder="请输入"
            height="120"
            maxlength="10"
        /></view>
      </view>
      <view class="pad-t-b-10">
        <view class="color-333 font-30 mt-20">检查结果</view>
        <view class="textArea">
          <view class="flex">
            <view
              :class="['radio', checkdResult === 1 ? '' : 'radioAct']"
              @click="checkRadio(1, 0)"
              >检查正常</view
            >
            <view
              :class="['radio', checkdResult === 2 ? '' : 'radioAct']"
              @click="checkRadio(2, 0)"
              >检查异常</view
            >
          </view>
          <u-input
            v-model="result"
            class=""
            type="textarea"
            placeholder="请输入"
            :auto-height="true"
            maxlength="24"
          />
          <view class="count color-999 font-24">{{ result.length }}/24</view>
        </view>
      </view>
      <view class="pad-t-b-10" v-show="checkdResult !== 1">
        <view class="color-333 font-30 mt-20">处理意见</view>
        <view class="textArea1">
          <view class="flex">
            <view
              :class="['radio1', dealWith === 2 ? '' : 'radio1Act']"
              @click="checkRadio(2, 1)"
              >建议调整更换</view
            >
            <view
              :class="['radio1', dealWith === 1 ? '' : 'radio1Act']"
              @click="checkRadio(1, 1)"
              >立即调整更换</view
            >
          </view>
        </view>
      </view>
      <view class="pad-t-b-10">
        <view class="color-333 font-30 mt-20">检查拍照</view>
        <view class="textArea1">
          <view class="photo" v-if="imgUrl" @click="choosePic">
            <image class="img" :src="imgUrl" mode="aspectFit" />
          </view>
          <view class="photo" v-else @click="choosePic">
            <i-icon
              icon="iconxiangji"
              type="single"
              class="mr-10 middle"
              size="47rpx"
              color="#999"
            ></i-icon>
          </view>
        </view>
      </view>
      <view class="fixedBtn">
        <view class="btn-bg-yellow btn" @click="submit"> 确认添加 </view>
      </view>
    </view></page-loading
  >
</template>

<script>
export default {
  data() {
    return {
      id: '',
      name: '',
      title: '', //检查项标题
      result: '', //检查结果
      checkdResult: 0, //检查结果选择
      dealWith: 0, //处理意见
      imgUrl: '',
      pageLoading: false, //初始化加载效果
    }
  },

  onLoad(e) {
    this.id = e.id
    this.name = e.name ? e.name : ''
    this.$nextTick(() => {
      this.pageLoading = true
    })
  },

  methods: {
    checkRadio(val, type) {
      if (type === 0) {
        this.checkdResult = val
      } else {
        this.dealWith = val
      }
    },

    submit() {
      if (!this.title) {
        uni.showToast({
          title: '请输入检查项标题',
          icon: 'none',
        })
        return
      }
      if (!this.checkdResult) {
        uni.showToast({
          title: '请选择检查结果',
          icon: 'none',
        })
        return
      }
      if (this.checkdResult === 2 && !this.dealWith) {
        uni.showToast({
          title: '请选择处理意见',
          icon: 'none',
        })
        return
      }
      if (!this.imgUrl) {
        uni.showToast({
          title: '请上传检查照片',
          icon: 'none',
        })
        return
      }
      this.$api.afterSales
        .addDismantCheck({
          order_arrive_store_id: this.id,
          technician_name: this.name,
          detection_Type: 7,
          list: [
            {
              car_Detection_Typedata_Name: this.title,
              car_Detection_Typedata_Choose_Name: this.result,
              url: this.imgUrl,
              detection_State: this.checkdResult,
              advice_Type: this.dealWith,
            },
          ],
        })
        .then((res) => {
          uni.showToast({
            title: '添加成功',
            duration: 2000,
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 2000)
        })
        .catch((err) => {
          console.log(err)
        })
    },

    //上传图片
    choosePic() {
      if (this.current === -1) {
        uni.showToast({
          title: '请选择异常项目',
          duration: 2000,
          icon: 'none',
        })
        return
      }
      const _this = this
      uni.showActionSheet({
        itemList: ['拍照', '打开相册'],
        success(res) {
          const cameraType = res.tapIndex ? 'album' : 'camera'
          uni.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: [cameraType], // 从相册选择
            success: function (result) {
              uni.showLoading({
                title: '图片上传中~',
              })
              _this.$api.files
                .uploadImg({
                  filePath: result.tempFilePaths[0],
                })
                .then((res) => {
                  _this.imgUrl = res.baseUrl + res.url
                  uni.hideLoading()
                })
                .catch((err) => {
                  uni.hideLoading()
                  uni.showToast({
                    title: '图片上传失败，请稍后重试',
                    icon: 'none',
                  })
                })
            },
          })
        },
      })
    },
  },
}
</script>

<style scoped lang="scss">
.wrap {
  width: 95%;
  margin: 2.5% 20rpx;
  .textArea,
  .textArea1 {
    width: 100%;
    background: #f6f6f6;
    border-radius: 10rpx;
    margin-top: 10rpx;
    padding: 10rpx;
  }
  .textArea1 {
    background: #fff;
  }

  .count {
    text-align: right;
    margin-top: -10rpx;
  }

  .radio,
  .radioAct {
    width: 162rpx;
    height: 52rpx;
    line-height: 50rpx;
    background: #ffffff;
    border: 2rpx solid #fbb000;
    border-radius: 25rpx;
    text-align: center;
    margin: 10rpx 4rpx;
    color: #fbb000;
    font-size: 26rpx;
  }
  .radioAct {
    color: #999999;
    border: 2rpx solid #999999;
  }
  .radio1,
  .radio1Act {
    width: 200rpx;
    height: 58rpx;
    line-height: 56rpx;
    color: #fff;
    background: #fbb000;
    border-radius: 29px;
    text-align: center;
    margin: 10rpx 4rpx;
    font-size: 26rpx;
  }
  .radio1Act {
    color: #999;
    background: #f6f6f6;
  }
  .photo {
    width: 200rpx;
    height: 133rpx;
    line-height: 131rpx;
    border: 2rpx dashed #999999;
    border-radius: 10rpx;
    text-align: center;

    .img {
      width: 200rpx;
      height: 133rpx;
      border-radius: 10rpx;
    }
  }
  .fixedBtn {
    width: 95%;
    left: 2.5%;
    position: fixed;
    bottom: 20rpx;
    .btn {
      width: 100%;
      height: 90rpx;
      line-height: 90rpx;
    }
  }
}
</style>
